import React, { Component } from "react";
import NowPlaying from "./Films/nwplaying";
import CommingSoon from "./Films/commingSoon";
import { Route, Switch, NavLink } from "react-router-dom";
import { Swiper, Tabs } from "antd-mobile";
import axios from "axios";
import { Redirect } from "react-router-dom/cjs/react-router-dom.min";
export default class films extends Component {
  state = {
    looplist: [
      {
        poster:
          "https://pic.maizuo.com/usr/movie/a3096eb4b17355e4baf21554d682cc05.jpg",
        name: "lzq",
        filmId: "defaultKey",
      },
    ],
  };
  //请求轮播图地址
  componentDidMount() {
    console.log("props传参外层", this.props);
    axios({
      url: "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=5181921",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.1","e":"16580266551103961213894657","bc":"510100"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      let loopFilmsArr = [];
      loopFilmsArr[0] = res.data.data.films[3];
      loopFilmsArr[1] = res.data.data.films[1];
      loopFilmsArr[2] = res.data.data.films[4];
      this.setState({ looplist: loopFilmsArr });
      console.log("dawdwad轮播图取三个", loopFilmsArr);
    });
  }
  render() {
    return (
      <div>
        <Swiper
          autoplay
          loop={true}
          autoplayInterval={"2500"}
          stuckAtBoundary
          allowTouchMove={true}
        >
          {this.state.looplist.map((item) => (
            <Swiper.Item key={item.filmId}>
              <img
                src={item.poster}
                alt={item.name}
                style={{
                  width: "30%",
                  height: "200px",
                  backgroundColor: "black",
                }}
              />
            </Swiper.Item>
          ))}
        </Swiper>
        {/* <div style={{ height: "200px", background: "pink" }}>大轮播</div> */}
        {/* 
        <ul>
          <li>
            <NavLink to="/films/nowPlaying">正在热映</NavLink>
          </li>
          <li>
            <NavLink to="/films/commingSoon">即将上映</NavLink>
          </li>
        </ul> */}
        <div style={{ position: "sticky", top: "0", backgroundColor: "#fff" }}>
          {" "}
          <Tabs
            activeKey={this.props.location.pathname}
            defaultActiveKey="1"
            onChange={(value) => {
              //编程式跳转
              this.props.history.push(value);
            }}
          >
            <Tabs.Tab title="正在热映" key="/films/nowPlaying"></Tabs.Tab>
            <Tabs.Tab title="即将上映" key="/films/commingSoon"></Tabs.Tab>
          </Tabs>
        </div>

        <Switch>
          {/* 子路由配置 嵌套路由 */}
          <Route component={NowPlaying} path="/films/nowPlaying" />
          <Route component={CommingSoon} path="/films/commingSoon" />
          <Redirect from="/films" to="/films/nowPlaying" />
        </Switch>
      </div>
    );
  }
}
